<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <title>CommentOnly</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">


    <script type="text/javascript">

        function OnPageOfficeCtrlInit() {
            pageofficectrl.OfficeToolbars = false;//隐藏office工具栏

            pageofficectrl.AddCustomToolButton("保存", "Save()", 1);
            pageofficectrl.AddCustomToolButton("新建批注", "InsertComment()", 3);
        }

        function AfterDocumentOpened() {
            refreshList();
        }
        function Save() {
            //设置保存方法
            pageofficectrl.SaveFilePage="/CommentsList/save"
            pageofficectrl.WebSave();
        }

        function refreshList() {
            document.getElementById("ul_Comments").innerHTML = "";

            let commentsListJson =JSON.parse(pageofficectrl.word.CommentsAsJson)
            for (let item of commentsListJson) {
                let itemDate =  dateFormat(item.date, 'yyyy-MM-dd HH:mm');
                document.getElementById("ul_Comments").innerHTML += "<li><a href='#' onclick='goToComment(" + item.id + ")'>"
                    +itemDate+"<br />[" +item.author+"]:"+ pageofficectrl.word.GetTextFromComment(parseInt(item.id)) + "</a></li>"
            }
        }

        function goToComment(index) {
            pageofficectrl.word.SelectComment(index);
        }

        function Button1_onclick() {
            pageofficectrl.word.InsertComment(document.getElementById("Text1").value);
            refreshList();
            document.getElementById("Text1").value = "";
        }

        function Button2_onclick() {
            refreshList();
        }

        function InsertComment() {
            pageofficectrl.word.InsertComment();
        }

        function dateFormat(date, format) {
            date = new Date((date-25569)*86400*1000);
            date = roundTimeToSeconds(date);
            date.setHours(date.getHours() - 8);
            var o = {
                'M+': date.getMonth() + 1, //month
                'd+': date.getDate(), //day
                'H+': date.getHours(), //hour
                'm+': date.getMinutes(), //minute
                's+': date.getSeconds(), //second
                'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
                'S': date.getMilliseconds() //millisecond
            };

            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

            for (var k in o)
                if (new RegExp('(' + k + ')').test(format))
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));

            return format;
        }

        function roundTimeToSeconds(date) {
            var seconds = date.getSeconds();
            if (seconds < 30) {
                date.setSeconds(0);
            } else {
                date.setSeconds(0);
                date.setMinutes(date.getMinutes() + 1);
            }
            return date;
        }
    </script>
</head>

<body>
<form id="form1">
    <div style=" width:1280px; height:700px;">
        <div id="Div_Comments" style=" float:left; width:220px; height:700px; border:solid 1px red;">
            <h3>批注列表</h3>
            <input id="Button2" type="button" value="刷新" onclick="return Button2_onclick()"/>
            <ul id="ul_Comments" style="font-size:12px;">

            </ul>
        </div>
        <div style=" width:1050px; height:700px; float:right;">
            <input id="Button1" type="button" value="插入批注" onclick="return Button1_onclick()"/>
            <input id="Text1" type="text"/>
            <div style=" width:auto; height:700px;" th:utext="${pageoffice}">

            </div>
        </div>
    </div>
</form>

</body>
</html>
